import React from 'react';
import { useNavigate } from "react-router-dom";
import '../../globle.css';
import './nav.css';

function Nav(props) {
    let navigate = useNavigate();
    let [navIndex, setNavIndex] = React.useState(window.location.pathname);

    function routerJump(el, path) {
        setNavIndex(path);
        navigate(path);
    }
    return (<ul className='navMenu'>
        <li className={(navIndex === "/" || navIndex === "/home") ? "foucseLi" : ""} onClick={(el) => routerJump(el, '/home')}>首页</li>
        <li className={(navIndex === "/components") ? "foucseLi" : ""} onClick={(el) => routerJump(el, '/components')}>组件</li>
        <li className={(navIndex === "/game") ? "foucseLi" : ""} onClick={(el) => routerJump(el, '/game')}>游戏cocos</li>
        <li className={(navIndex === "/3Dnebule") ? "foucseLi" : ""} onClick={(el) => routerJump(el, '/3Dnebule')}>3D星云</li>
    </ul>)
}

export default Nav;